<template>
    <div>
        <ul class="auth-list">
            <li
                v-for="(item, index) in data"
                :key="index"
                @click="handleTo('detail', item.authId)"
            >
                <!-- <img src="../../assets/images/icon-auth.png" alt=""> -->
                <div>
                    <p class="auth-enterprise">{{ item.authDesc }}</p>
                    <p>业务场景：{{ item.sceneName }}</p>
                    <p>授权日期：{{ item.authBegin }}</p>
                    <p>授权截止日期：{{ item.authEnd }}</p>
                    <div
                        v-if="valid"
                        class="action"
                        @click.stop="handleRevoke(item)"
                    >
                        撤销
                    </div>
                    <div
                        v-else
                        :class="[
                            ['0', '4'].includes(item.authStatus)
                                ? 'col-E68F2A'
                                : 'col-3BB56C',
                        ]"
                    >
                        {{ authStatusDict[item.authStatus] || '授权已到期' }}
                    </div>
                </div>
            </li>
        </ul>
        <Popup
            ref="pop"
            @on-submit="handleConfirm"
        />
    </div>
</template>

<script>
import Popup from './popup';
import { restful_api } from '@/api';
export default {
    name: 'AuthorizationAuthList',
    components: { Popup },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        valid: {
            type: Boolean,
            default: () => false,
        },
    },
    data() {
        return {
            actionAuthId: '',
            authStatusDict: {
                0: '我已撤销授权',
                4: '已撤销授权',
            },
        };
    },
    mounted() {},
    methods: {
        async handleConfirm() {
            this.$refs.pop.close();
            let data = {
                methodId: 'TP350013',
                params: {
                    authId: this.actionAuthId,
                },
            };
            await restful_api(data);
            location.reload();
        },
        handleRevoke({ authId }) {
            this.actionAuthId = authId;
            this.$refs.pop.open();
        },
        handleTo(nav, authId) {
            this.$router.push({ path: nav, query: { authId } });
        },
    },
};
</script>
<style scoped>
/* .icon {
    display: block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 6px;
}
.icon-user {
    background-image: url('../../assets/images/icon-user.png')
}
.icon-clock {
    background-image: url('../../assets/images/icon-clock.png')
} */
.col-3BB56C {
    color: #3bb56c;
}
.col-E68F2A {
    color: #e68f2a;
}
.auth-list {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 20px;
    color: #999;
}
.auth-list li {
    position: relative;
    display: flex;
    /* height: 96px; */
    padding: 16px 0;
    border-bottom: solid thin #efefef;
}
.auth-list li > img {
    width: 64px;
    height: 64px;
    margin-right: 12px;
}
.auth-list .auth-enterprise {
    font-size: 14px;
    line-height: 24px;
    color: #000;
}
.auth-list p {
    display: flex;
    align-items: center;
}

.action {
    position: absolute;
    right: 8px;
    bottom: 16px;
    color: #108cee;
}
</style>
